<template>
    <div>
        <el-form :model="ruleForm" :rules="rules" label-width="100px" class="demo-ruleForm" ref="myForm">
            <el-form-item prop="userName">
                <el-input v-model="ruleForm.userName">
                    <template slot="prepend">
                        <i class="el-icon-edit"></i>
                    </template></el-input>
            </el-form-item>
            <el-form-item prop="password">
                <el-input v-model="ruleForm.password">
                    <template slot="prepend"><i class="el-icon-lock"></i></template>
                </el-input>
            </el-form-item>
            <el-form-item prop="veri">
                <el-input v-model="ruleForm.veri">
                    <template slot="prepend"><i class="el-icon-loading"></i></template>
                </el-input>
            </el-form-item>
        </el-form>
        <messageCode></messageCode>

        <el-button type="primary">忘记密码</el-button>
        <el-button type="success" @click="sub"> 登录</el-button>
    </div>
</template>

<script>
import messageCode from "../components/MessageCode"
import {
    _doLogin,
    _uploadMessageCode
} from "../api/toos.js"
export default {
    data() {
        return {
            ruleForm: {
                userName: "",
                password: "",
                veri: "",
            },
            rules: {
                userName: [
                    { required: true, message: '请输入用户名', trigger: 'blur' },
                    { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
                ],
                password: [
                    { required: true, message: '请输入密码', trigger: 'blur' }
                ],
                veri: [
                    { required: true, message: '请输入验证码', trigger: 'blur' }
                ],
            }
        }
    },
    components: {
        "messageCode": messageCode
    },
    methods: {

        async sub() {
            this.$refs.myForm.validate(async vali => {
                console.log(vali) //vali --true 表单全部通过
                // 验证通过才发送请求
                if (vali) {
                    const res_veri = await _uploadMessageCode(this.ruleForm.veri)
                    console.log(res_veri)
                    if (res_veri.data.err) {
                        this.$message('验证码错误')
                        return
                    }
                    if (res_veri.data.success) {
                        console.log(1111111111)
                        const res = await _doLogin({
                            userName: this.ruleForm.userName,
                            password: this.ruleForm.password
                        })
                        console.log(res)
                        if (res.data.success) {
                            this.$message.success('登录成功,正在跳转主页')
                            this.$router.push('/layout')
                        } else {
                            this.$message.error('登录错误')
                        }
                    }
                }
            })
        }
    }

}
</script>

<style lang="scss" scoped></style>